import { View, Text, FlatList, TouchableOpacity, Image, useWindowDimensions } from 'react-native'
import React, { useContext, useEffect, useState } from 'react'
import { StyleSheet } from 'react-native'

//使用上下文对象的步骤3：孙辈组件找到爷爷组件共享的上下文对象
//import {GoodsTypesCtx} from '../app/mall/list'
import {GoodsTypesCtx} from '../ctx'

import { zhBorderColor, zhBorderWidth, zhSpacingColLg, zhSpacingColSm, zhSpacingRowBase, zhSpacingRowLg, zhSpacingRowSm, zhThemeColor } from '../global'
import { base, mallGoodsList } from '../service'
import { useRouter } from 'expo-router'

export default function ZhTab0() {
  //使用ExpoRouter模块提供的钩子创建路由器对象
  let router = useRouter()
  //状态变量 —— 记录当前选中的是哪一个“商品类别”(数组中选中类别的下标)
  let [curType, setCurType] = useState(0)
  //状态变量 —— 商品列表
  let [goodsList, setGoodsList] = useState([])

  //使用上下文对象的步骤4：从上下文对象中读取数据
  let types = useContext(GoodsTypesCtx)
  // console.log('孙子组件读取到爷爷在上下文中共享的数据：', types)

  //获取屏幕的尺寸，进而计算出商品图片应该有的尺寸
  let {width} = useWindowDimensions()
  let imgWidth = (width - 80 - zhSpacingRowBase*4 ) / 2

  //左侧选中的“商品类别”改变后，立即发起异步请求，获取该类别下的商品列表
  useEffect(()=>{
    // console.log('即将请求指定类别的商品，类别编号：', curType)
    // console.log('此时商品类别数组中的数据：', types)
    if(types.length===0){
      return //商品类别数组的长度为0，即目前还没查询到任何的商品类别数据
    }
    ;(async()=>{
      let data = await mallGoodsList(types[curType].tid)
      // console.log('商品列表：', data)
      setGoodsList( data )
    })()            
  }, [curType, types]) 
  //提示：只要是在副作用方法中使用到的变量，都应该声明到依赖列表中
  
  //渲染出一个“商品类别”
  let renderType = ({item, index})=>{
    return <Text onPress={_=>setCurType(index)} style={[ss.type, {color:index===curType?'#fff':'#333',backgroundColor:index===curType?zhThemeColor:'transparent'}]}>{item.tname}</Text>
  }
  //渲染出一个“商品”
  let renderGoods = ({item, index})=>{
    return (
      <TouchableOpacity 
        style={ss.goods} 
        activeOpacity={0.5} 
        onPress={_=>router.push('/mall/detail?gid=' + item.gid)}>
        <Image style={{width:imgWidth, height:imgWidth}} source={{uri: base+item.mainPic}}/>
        {/* numberOfLines：文本最多显示几行（溢出部分用省略号代替） */}
        <Text style={ss.title} numberOfLines={3}>{item.goodsName}</Text>
        <Text style={ss.count}>月售：{item.soldCount}</Text>
        <Text>
          {/* 如果item.discount为1，则不应该出现“折扣价格” */}
          { item.discount<1 && (
            <Text style={ss.discountPrice}>￥{item.originalPrice * item.discount}</Text>
          )}
          {/* 如果item.discount为1，“原价”上不应该出现删除线 */}
          <Text style={ss.originalPrice}>￥{item.originalPrice}</Text>
        </Text>
      </TouchableOpacity>
    )
  }
  return (
    <View style={ss.tab0}>
      {/* 左侧：商品类别列表 */}
      {/* 平面列表必需的属性： data、renderItem */}
      <FlatList
        style={ss.typeList}
        data={types}
        renderItem={renderType}
      />
      {/* 右侧：当前类别下的商品列表 */}
      {/* numColumns：一行中可以呈现几列 */}
      <FlatList
        data={goodsList}
        renderItem={renderGoods}
        numColumns={2}
      />
    </View>
  )
}

let ss = StyleSheet.create({
  tab0: {
    flexDirection: 'row', //弹性容器的主轴方向：横向
    flex: 1,//尺寸增长权重：1
  },
  typeList: {
    backgroundColor: '#f2f2f2', //背景颜色
    width: 80, //宽度
    flexShrink: 0, //尺寸的收缩权重：0
    flexGrow: 0, //尺寸的增长权重：0
  },
  type: {
    textAlign: 'center', //文字水平居中
    paddingVertical: zhSpacingColLg, //竖直方向上的内边距
  },
  goods: {
    width: '50%', //宽度
    padding: zhSpacingRowBase, //内边距         
    borderColor: zhBorderColor, //边框
    borderWidth: zhBorderWidth
  },
  pic: {
    //width:'100%', //宽度
    //height: 100,  //高度
  },
  title:{
    fontSize: 15, //字体大小
    marginVertical: zhSpacingColSm, //竖直方向上外间距
  },
  count:{
    fontSize: 13,
    color: '#888'
  },
  discountPrice:{
    fontSize: 14,
    color: '#f00',
    //paddingRight: 30,   //Text中的Text水平方向上不能添加margin或padding
  },
  originalPrice:{
    fontSize: 13,
    textDecorationLine:'line-through'
  },
})